<!-- 吉柚课堂 -->
<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="display: flex;justify-content: space-between;height: 60px;">
			<div>
				<p class="text">吉柚小课堂</p>
			</div>
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.name" placeholder="标题"></el-input>
				</el-form-item>
				<el-form-item >
					<el-button type="primary" icon="el-icon-search">查询</el-button>
				</el-form-item>
				<el-form-item >
					<el-button type="primary" @click="dialogVisible = true" icon="el-icon-plus">添加</el-button>
				</el-form-item>
			</el-form>
		</el-col>
						
		<!--列表-->
		<el-table :data="RoomList" highlight-current-row v-loading="loading" border @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="55" align="center">
			</el-table-column>
			<el-table-column type="index" label="ID" width="60" align="center">
			</el-table-column>
			<el-table-column prop="title" label="标题" align="center">
			</el-table-column>
			<el-table-column prop="synopsis" label="简介" align="center">
			</el-table-column>
			<el-table-column prop="contentType" label="分类" width="90" :formatter="formatSex" align="center">
			</el-table-column>
			<el-table-column prop="newsType" label="类型" width="90" align="center">
				<template slot-scope="scope">
					<p v-if="scope.row.newsType == 1">小课堂</p>
					<p v-else-if="scope.row.newsType == 2">公告</p>
					<p v-else-if="scope.row.newsType == 3">消息</p>
					<p v-else-if="scope.row.newsType == 4">更新公告</p>
				</template>
			</el-table-column>
			<el-table-column prop="readCount" label="阅读量" width="90" align="center">
			</el-table-column>
			<el-table-column prop="nstate" label="状态" width="90" align="center" :formatter="fromnstate">
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="170" align="center">
			</el-table-column>
			<el-table-column label="操作" align="center" width="200">
				<template slot-scope="scope">
					<el-button type="primary" size="small" @click="handleDetail(scope.$index, scope.row)" icon="el-icon-view">查看</el-button>
					<el-button type="warning" size="small" @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit">修改</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">单个/批量删除</el-button>
			<el-pagination background layout="total,sizes,prev, pager, next,jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
		
		<!--添加界面-->
		<el-dialog title="内容添加" :visible.sync="dialogVisible" width="55%" :before-close="handleClose">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="宣传图" prop="imgUrl">
					<el-upload
					  class="upload-demo"
					  action="/manager/common/upload/uploadFile"
					  :on-preview="handlePreview"
					  :on-remove="handleRemove"
					  :on-success="handleVideoSuccess"
					  ref="upload"
					  :file-list="fileList"
					  list-type="picture">
					  <el-button size="small" type="primary">选择宣传图</el-button>
					  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>
				<el-form-item label="标题" prop="title">
					<el-input v-model="addForm.title" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="简介" prop="synopsis">
					<el-input v-model="addForm.synopsis" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="分类" prop="contentType">
					<el-radio-group v-model="addForm.contentType">
						<el-radio class="radio" :label="0">通用</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="内容类型" prop="title">
					<el-radio-group v-model="addForm.newsType">
						<el-radio class="radio" :label="1">小课堂</el-radio>
						<el-radio class="radio" :label="2">公告</el-radio>
						<el-radio class="radio" :label="3">消息</el-radio>
						<el-radio class="radio" :label="4">更新公告</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="内容详情" prop="content">
					<wangeditor  v-model="addForm.content"></wangeditor  >
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary"  @click.native="addSubmit"  :loading="addLoading">确定</el-button>
			</span>
		</el-dialog>
		<!--编辑界面-->
		<el-dialog title="修改内容" :visible.sync="editFormVisible" width="55%" :before-close="handleClose">
			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
				<el-form-item label="宣传图" prop="imgUrl">
					<el-input v-model="editForm.imgUrl" auto-complete="off"></el-input>
					<el-upload
					  class="upload-demo"
					  action="/manager/common/upload/uploadFile"
					  :on-preview="handlePreview"
					  :on-remove="handleRemove"
					  :on-success="handleVideoSuccess"
					  ref="upload"
					  :file-list="fileList"
					  list-type="picture">
					  <el-button size="small" type="primary">选择宣传图</el-button>
					  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>
				<el-form-item label="标题" prop="title">
					<el-input v-model="editForm.title" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="简介" prop="synopsis">
					<el-input v-model="editForm.synopsis" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="分类" prop="contentType">
					<el-radio-group v-model="editForm.contentType">
						<el-radio class="radio" :label="0">通用</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="内容类型" prop="title">
					<el-radio-group v-model="editForm.newsType">
						<el-radio class="radio" :label="1">小课堂</el-radio>
						<el-radio class="radio" :label="2">公告</el-radio>
						<el-radio class="radio" :label="3">消息</el-radio>
						<el-radio class="radio" :label="4">更新公告</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="内容详情" prop="content">
					<wangeditor  v-model="editForm.content"></wangeditor  >
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">确定</el-button>
			</div>
		</el-dialog>
		<!--查看具体课堂内容-->
		<el-dialog title="内容详情预览" :visible.sync="ViewVisible" width="55%" :before-close="handleClose">
			<el-form style="margin-top: -20px;">
				<el-form-item style="display: flex;">
					<label slot="label">标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题：</label>
					<input v-model="RoomDetail.title" auto-complete="off" readonly style="border: none;width: 500px;"></input>
				</el-form-item>
				<el-form-item style="display: flex;">
					<label slot="label">简&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;介：</label>
					<input v-model="RoomDetail.synopsis" auto-complete="off" readonly style="border: none;width: 500px;"></input>
				</el-form-item>
				<el-form-item style="display: flex;" >
					<label slot="label">分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类：</label>
					<input v-if="RoomDetail.contentType == '0'" v-model="this.Type0" auto-complete="off" readonly style="border: none;"></input>
					<input v-else-if="RoomDetail.contentType == '1'" v-model="this.Type1" auto-complete="off" readonly style="border: none;"></input>
				</el-form-item>
				<el-form-item style="display: flex;" >
					<label slot="label">类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：</label>
					<input v-if="RoomDetail.newsType == '1'" v-model="this.newType0" auto-complete="off" readonly style="border: none;"></input>
					<input v-else-if="RoomDetail.newsType == '2'" v-model="this.newType1" auto-complete="off" readonly style="border: none;"></input>
					<input v-else-if="RoomDetail.newsType == '3'" v-model="this.newType2" auto-complete="off" readonly style="border: none;"></input>
				</el-form-item>
				<el-form-item style="display: flex;">
					<label slot="label">阅&nbsp;读&nbsp;量：</label>
					<input v-model="RoomDetail.readCount" auto-complete="off" readonly style="border: none;"></input>
				</el-form-item>
				<el-form-item style="display: flex;" >
					<label slot="label">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：</label>
					<input v-if="RoomDetail.nstate == '0'" v-model="this.nstate0" auto-complete="off" readonly style="border: none;"></input>
					<input v-else-if="RoomDetail.nstate == '1'" v-model="this.nstate1" auto-complete="off" readonly style="border: none;"></input>
				</el-form-item>
				<el-form-item style="display: flex;" >
					<label slot="label">时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间：</label>
					<input v-model="RoomDetail.createTime" auto-complete="off" readonly style="border: none;"></input>
				</el-form-item>
				<el-form-item style="display: flex;" >
					<label slot="label">宣&nbsp;传&nbsp;图：</label>
					<img :src="RoomDetail.imgUrl" alt="宣传图"style="width: 75px;">
				</el-form-item>
				<el-form-item style="display: flex;" >
					<label slot="label">内&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;容：</label>
					<p v-html="RoomDetail.content" style="width: 90%;"></p>
				</el-form-item>
			</el-form>
		</el-dialog>
	</section>
</template>

<script>
	import util from '../../../common/js/util'
	import wangeditor from '../../../components/addRoom.vue'
	import { 
		getRoomList, 
		getRoomDetail, 
		addRoom, 
		editRoom, 
		delRoom,
		UploadRTich,
		Refreshtoken
	} from '../../../api/api';


	export default {
		inject:['reload'],
		data() {
			return {
				filters: {
					name: ''
				},
				RoomList: [],
				total: 0,
				page: 1,
				loading: false,
				dialogVisible: false,
				fileList: [],
				scope:'',
				total: 0,
				page: 1,
				size:10,
				sels: [],//列表选中列
				listLoading: false,
				editFormVisible: false,//编辑界面是否显示
				editFormVisible:false,
				ViewVisible:false,
				RoomDetail:[],//详情
				editLoading: false,
				//编辑界面数据
				editForm: {
					title: '',
					contentType: 0,
					content:'',
					synopsis:''
				},
				editFormRules: {
					title: [{
						required: true,
						message: '请输入标题',
						trigger: 'blur'
					}],
					content: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}],
					synopsis: [{
						required: true,
						message: '请输入简介',
						trigger: 'blur'
					}]
				},
				//新增界面数据
				addForm: {
					title: '',
					contentType: 0,
					content:'',
					synopsis:'',
					newsType:1
				},
				addLoading: false,
				addFormRules: {
					title: [{
						required: true,
						message: '请输入标题',
						trigger: 'blur'
					}],
					content: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}],
					synopsis: [{
						required: true,
						message: '请输入简介',
						trigger: 'blur'
					}]
				},
				
				Type0: '通用',
				Type1: '专属',
				nstate0:'禁用',
				nstate1:'正常',
				newType0:'小课堂',
				newType1:'内容',
				newType2:'消息'
			}
		},
		components: {
		      wangeditor 
		    },
		mounted() {
			this.getList()
			this.queryInfo();
			this.timer = setInterval(() => {
			   setTimeout(this.queryInfo, 0)
			}, 600000)
			
		},
		methods: {
			// 设置定时器
			queryInfo() {
				var Token = sessionStorage.getItem('Token');
				var timestamp = new Date().getTime();
				let para = {token: Token,timestamp: timestamp};
				Refreshtoken(para).then((res) => {
					var res = res.data;
					if (res.code != 0) {
						this.$message({
							message: res.message,
							type: 'error'
						});
					} else {
						this.loading = false;
					}
				});
			},
			//性别显示转换
			formatSex: function (row, column) {
				return row.contentType == 1 ? '专属' : row.contentType == 0 ? '通用' : '未知';
			},
			fromnstate:function (row, column) {
				return row.nstate == 1 ? '可用' : row.nstate == 0 ? '禁用' : '未知';
			},
			handleSizeChange(val) {
				this.size = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getList();
			},
			//显示新增界面
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			handleRemove(file, fileList) {
			    console.log(file, fileList);
			},
			handlePreview(file) {
			 console.log(file);
			},
			handleVideoSuccess(res,file) {
			 console.log(file.response.data[0].url);
			 this.scope = file.response.data[0].url
			},
			//新增
			addSubmit: function () {
				
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认添加提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							var Token = sessionStorage.getItem('Token');
							var timestamp = new Date().getTime();
							var imgUrl = this.scope;
							var para = {
								token: Token,
								timestamp: timestamp,
								imgUrl:imgUrl,
								title: this.addForm.title,
								contentType: this.addForm.contentType,
								content: this.addForm.content,
								synopsis: this.addForm.synopsis,
								newsType: this.addForm.newsType,
							};
							console.log(para)
							addRoom(para).then((res) => {
								this.addLoading = false;
								this.$message({
									message: '添加成功',
									type: 'success'
								});
								this.$refs['addForm'].resetFields();
								this.$refs.upload.clearFiles();
								this.dialogVisible = false;
								this.getList();
							});
						});
					}
				});
			},
			// 修改显示
			handleEdit(index, row) {
				this.editFormVisible = true;
				this.editForm = Object.assign({}, row);
			},
			//修改
			editSubmit: function () {
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							var Token = sessionStorage.getItem('Token');
							var timestamp = new Date().getTime();
							var imgUrl = this.scope;
							let para = Object.assign({token: Token,timestamp: timestamp,imgUrl:imgUrl}, this.editForm);
							editRoom(para).then((res) => {
								this.editLoading = false;
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['editForm'].resetFields();
								this.$refs.upload.clearFiles();
								this.editFormVisible = false;
								this.getList();
							});
						});
					}
				});
			},
			
			//批量删除
			selsChange: function (sels) {
				this.sels = sels;
			},
			batchRemove: function () {
				var ids = this.sels.map(item => item.id).toString();
				this.$confirm('确认删除选中记录吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					var Token = sessionStorage.getItem('Token');
					var timestamp = new Date().getTime();
					let para = {token: Token, timestamp:timestamp, ids: ids };
					delRoom(para).then((res) => {
						this.listLoading = false;
						//NProgress.done();
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.getList();
					});
				}).catch(() => {
			
				});
			},
			// 获取内容详情
			handleDetail:function(index, row){
				this.ViewVisible = true;
				var Token = sessionStorage.getItem('Token');
				var timestamp = new Date().getTime();
				let para = {
					token: Token,
					timestamp: timestamp,
					id:row.id
				};
				this.loading = true;
				getRoomDetail(para).then((res) => {
					var res = res.data;
					if (res.code != 0) {
						this.$message({
							message: res.message,
							type: 'error'
						});
					} else {
						this.total = res.data.total;
						this.RoomDetail = res.data;
						this.loading = false;
					}
				});
			},
			getList:function(){
				var Token = sessionStorage.getItem('Token');
				var timestamp = new Date().getTime();
				let para = {
					token: Token,
					curpage:this.page,
					pagesize:this.size,
					timestamp: timestamp
				};
				this.loading = true;
				getRoomList(para).then((res) => {
					var res = res.data;
					if (res.code != 0) {
						this.$message({
							message: res.message,
							type: 'error'
						});
					} else {
						this.total = res.data.total;
						this.RoomList = res.data.list;
						this.loading = false;
					}
				});
			}
		},
		beforeDestroy() {
		  clearInterval(this.timer);        
		  this.timer = null;
		}
	}

</script>

<style scoped>
.text{
	font-family: "arial, helvetica, sans-serif";
	font-size: 16px;
	color: #333;
	margin-top: 8px;
	margin-left: 10px;
	font-weight: 600;
}
</style>